<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      flex-shrink: 0;
      height: 700px;
      align-items: stretch;
      padding: 10px;
    "
  >
    <div id="detail-chart" style="width: 99%; height: 300px; flex: 1"></div>
    <div>
      <div style="flex: 1">
        <el-table
          :data="bomInfos"
          border
          stripe
          style="width: 100%; margin-top: 20px"
          max-height="300px"
          table-layout="auto"
        >
          <el-table-column type="index" label="序号" sortable width="60px" />
          <el-table-column prop="child_erp_id" label="图号" sortable />
          <el-table-column prop="child_name" label="名称" sortable />
          <el-table-column
            prop="priceInfo.KEPH_KST001"
            label="材料成本"
            :formatter="formatter"
            sortable
          />
          <el-table-column
            prop="priceInfo.KEPH_MANUFACTURE"
            label="制造成本"
            :formatter="formatter"
            sortable
          />
          <el-table-column
            prop="priceInfo.KEPH_DEPRECITION"
            label="折旧费"
            :formatter="formatter"
            sortable
          />
          <el-table-column
            prop="priceInfo.KEPH_OTHER"
            label="其他成本"
            :formatter="formatter"
            sortable
          />
          <el-table-column
            prop="priceInfo.KEPH_SUM"
            label="总成本"
            :formatter="formatter"
            sortable
          />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

let props = defineProps({
  uid: ref(),
  item: ref(),
  paneName: ref(),
  activeName: ref(),
});

const formatter = (row, column, cellValue) => {
  if (typeof cellValue === "number") {
    return cellValue.toFixed(2); // 保留小数点后两位
  } else {
    return cellValue; // 其他类型的数据原样返回
  }
};
</script>

<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import { nextTick, ref, watch } from "vue";

export default {
  data() {
    return {
      isSearching: false,
      bomInfos: [],
      itemNames: [],
      itemValueMaps: {},
      test2: true,
    };
  },
  mounted: function () {
    this.initChar("detail-chart");
    this.$emit("setMultiSelect", false);
    if (this.uid != null && this.uid.length > 0) {
      this.loadBomInfo();
    }
  },
  created() {
    watch(
      () => this.uid,
      (newUid, oldUid) => {
        console.log("uid =>", newUid, oldUid);
        this.loadBomInfo();
      }
    ),
      watch(
        () => this.activeName,
        (newName, curName) => {
          console.log("newName ==>" + newName);
          if (newName == this.paneName) {
            this.loadBomInfo();
          }
        }
      );
  },
  methods: {
    initChar(elementName) {
      const chartDom = document.getElementById(elementName); // 获取DOM元素

      const myChart = echarts.init(chartDom); // 初始化echarts对象

      chartDom.setAttribute("_echarts_instance_", ""); //将生成的图标ID清除掉，让每次切换路由都能更新

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        xAxis: {
          type: "category",
          data: this.itemNames,
          axisLabel: { interval: 0, rotate: 45 },
        },
        series: [
          {
            name: "总成本",
            type: "bar",
            data: this.itemValueMaps["总成本"],
          },
          {
            name: "材料成本",
            type: "bar",
            data: this.itemValueMaps["材料成本"],
          },
          {
            name: "制造成本",
            type: "bar",
            data: this.itemValueMaps["制造成本"],
          },
          {
            name: "损耗费",
            type: "bar",
            data: this.itemValueMaps["损耗费"],
          },
          {
            name: "其它成本",
            type: "bar",
            data: this.itemValueMaps["其它成本"],
          },
        ],
      };
      myChart.setOption(option); // 设置配置项并显示图表
      let erd = elementResizeDetectorMaker();
      //动态适应父项DIV的宽度变化
      erd.listenTo(document.getElementById(elementName), () => {
        nextTick(() => {
          myChart.resize();
        });
      });
    },
    formatNum(value) {
      if (value && typeof value === "number") {
        return value.toFixed(2); // 保留小数点后两位
      } else {
        return value; // 其他类型的数据原样返回
      }
    },
    loadBomInfo() {
      console.log("查询SECTION信息");
      this.isSearching = true;
      const url =
        "/getBomInfo2?parentUid=" + this.uid + "&childType=P8_SectionRevision";
      console.log(url);
      this.$http
        .get(url)
        .then((response) => {
          console.log("查询结果", response.data);
          this.bomInfos = response.data;
          this.initChartData();
          this.initChar("detail-chart");
          this.isSearching = false;
        })
        .catch((error) => {
          this.isSearching = false;
          console.log(error);
        });
    },
    initChartData() {
      let names = [];
      let valueMap = {};
      valueMap["总成本"] = [];
      valueMap["材料成本"] = [];
      valueMap["制造成本"] = [];
      valueMap["损耗费"] = [];
      valueMap["其它成本"] = [];

      try {
        this.bomInfos.forEach((bomInfo) => {
          names.push(bomInfo.child_name);
          valueMap["总成本"].push(this.formatNum(bomInfo.priceInfo?.KEPH_SUM));
          valueMap["材料成本"].push(
            this.formatNum(bomInfo.priceInfo?.KEPH_KST001)
          );
          valueMap["制造成本"].push(
            this.formatNum(bomInfo.priceInfo?.KEPH_MANUFACTURE)
          );
          valueMap["损耗费"].push(
            this.formatNum(bomInfo.priceInfo?.KEPH_DEPRECITION)
          );
          valueMap["其它成本"].push(
            this.formatNum(bomInfo.priceInfo?.KEPH_OTHER)
          );
        });
      } catch (error) {
        console.error(error);
      }

      this.itemNames = names;
      this.itemValueMaps = valueMap;
    },
  },
};
</script>
